<template>

	<view class="page_content">
		<!-- 		<view class="main" style="height: 220rpx;">
			<view>用户头像</view>
			<view class="main_right">
				<button class="login-btn" open-type="chooseAvatar" @chooseavatar="getPhoneNumber($event, 'avatar')">
					<image src="../static/images/missing-face.png" mode=""></image>
				</button>
				<u-icon name="arrow-right" color="#606266" size="32"></u-icon>
			</view>
		</view> -->
		<view class="main">
			<view>用户名字</view>
			<view class="main_right">
				<input style="text-align: right; background: white;margin-right: 20rpx;" type="nickname"
					:value="username" @blur="inputBlur" placeholder="暂未获取用户真实名称" />
				<u-icon name="arrow-right" color="#606266" size="32"></u-icon>
			</view>
		</view>

		<view class="main">
			<view>邮箱</view>
			<view class="main_right">
				<input style="text-align: right; background: white;margin-right: 20rpx;" type="nickname" :value="phone"
					@blur="inputBlurEmail" placeholder="暂未获取用户邮箱" />
				<u-icon name="arrow-right" color="#606266" size="32"></u-icon>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		updateUserName,
		updateUserEmail
	} from '@/api/member.js'

	import store from '@/store/index.js'

	export default {
		data() {
			return {
				username: '',
				avatar: 'https://hbplaylet.oss-cn-hangzhou.aliyuncs.com/system/image/20240307/1709796410948avatar.png',
				phone: ''
			};
		},
		onLoad(options) {},
		onShow() {
			this.username = store.state.userInfo.provider.username
			this.phone = store.state.userInfo.provider.phone
		},
		methods: {
			// 设置昵称
			inputBlur(e) {
				console.log(1121, e, this.username);
				// 调用接口进行更新
				if (e.detail.value) {
					updateUserName({
						userName: e.detail.value
					}).then(res => {
						this.$u.toast('更新成功');
						console.log("删除缓存:" + res.data);
						// 删除缓存
						uni.removeStorage({
							key: 'userInfo'
						});
						// 重新写入缓存
						console.log("重新写入缓存开始:" + JSON.stringify(res.data));
						store.commit({
							type: 'login',
							provider: res.data
						})
						console.log("重新写入缓存结束");
					}).catch(err => {
						uni.showModal({
							title: '更新失败',
							content: err.data.message,
							showCancel: false,
						});
					})
				}
			},


			// 设置邮箱
			inputBlurEmail(e) {
				console.log(1121, e, this.username);
				// 调用接口进行更新
				if (e.detail.value) {
					updateUserEmail({
						userEmail: e.detail.value
					}).then(res => {
						this.$u.toast('更新成功');
						console.log("删除缓存:" + res.data);
						// 删除缓存
						uni.removeStorage({
							key: 'userInfo'
						});
						// 重新写入缓存
						console.log("重新写入缓存开始:" + JSON.stringify(res.data));
						store.commit({
							type: 'login',
							provider: res.data
						})
						console.log("重新写入缓存结束");
					}).catch(err => {
						uni.showModal({
							title: '更新失败',
							content: err.data.message,
							showCancel: false,
						});
					})
				}
			},



		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 0 40rpx;
		height: 110rpx;
		font-weight: bold;
		font-size: 32rpx;
		border-bottom: 1px solid #E7E7E7;
		background-color: white;

		.main_right {
			display: flex;

			text:nth-child(1) {
				padding-right: 20rpx;
			}
		}

		.login-btn {
			// width: 140rpx;
			/* 设置宽度 */
			height: 140rpx;
			/* 设置高度 */
			// background-image: url('https://hbplaylet.oss-cn-hangzhou.aliyuncs.com/system/image/20240307/1709796410948avatar.png');
			/* 背景图片路径 */
			background-size: cover;
			/* 图片填满整个容器 */
			background-repeat: no-repeat;
			/* 不重复显示背景图片 */
			border-radius: 8rpx;
			/* 自定义圆角大小（可选） */
			border-width: 0;
			/* 去除默认边框 */
			border: none;
			background-color: white;

			image {
				width: 140rpx;
				height: 140rpx;
			}
		}

		button::after {
			border: none;
			opacity: 0;
		}
	}

	.popup {
		.popup_btn {
			.btn {
				width: 332rpx;
				height: 72rpx;
				background: $uni-color;
				border-radius: 55rpx 55rpx 55rpx 55rpx;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>